<template>
  <div class="dashboard-container">
    <!-- <div class="dashboard-text">name: {{ name }}</div> -->
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="grid-content bg-purple">
          <el-card class="box-card">
            <div style="color: #97a8be">
              <span> 总答题数量</span>
              <i class="el-icon-warning"></i>
            </div>
            <p class="test-num">260,560</p>
            <p>
              <span>
                周同比 12%
                <i class="el-icon-caret-top"></i>
              </span>
              <span style="padding-left: 15px">
                日环比 11%
                <i class="el-icon-caret-bottom"></i>
              </span>
            </p>
            <div class="foot">
              <hr />
              <p>日答题数量 <span style="padding-left: 10px">12,423</span></p>
            </div>
          </el-card>
        </div>
      </el-col>

      <el-col :span="6">
        <div class="grid-content bg-purple">
          <el-card class="box-card">
            <div style="color: #97a8be">
              <span>试题方向</span>
              <i class="el-icon-warning"></i>
            </div>
            <TestDirection />
            <div class="foot">
              <hr />
              <p>试题库数量 <span style="padding-left: 10px">10,234</span></p>
            </div>
          </el-card>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple">
          <el-card class="box-card">
            <div style="color: #97a8be">
              <span>试题学科分布</span>
              <i class="el-icon-warning"></i>
            </div>
            <TestSubject />
            <div class="foot">
              <hr />
              <p>前端试题数量 <span style="padding-left: 10px">5,234</span></p>
            </div>
          </el-card>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple">
          <el-card class="box-card">
            <div style="color: #97a8be">
              <span>试题方向</span>
              <i class="el-icon-warning"></i>
            </div>
            <AddTest />
            <div class="foot">
              <hr />
              <p>试题库数量 <span style="padding-left: 10px">10,234</span></p>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
    <el-card class="box-card cardcom">
      <span class="qianduan">前端与java学科试题走势图</span>
      <el-tabs v-model="activeName" class="tabSty">
        <el-tab-pane label="前端学科" name="first">
          <QianDuan />
        </el-tab-pane>
        <el-tab-pane label="JAVA学科" name="second">
          <JavaCom />
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import TestDirection from './components/TestDirection.vue'
import TestSubject from './components/TestSubject.vue'
import AddTest from './components/AddTest.vue'
import QianDuan from './components/QianDuan.vue'
import JavaCom from './components/JavaCom.vue'

export default {
  components: { TestDirection, TestSubject, AddTest, QianDuan, JavaCom },
  data() {
    return {
      activeName: 'first'
    }
  },
  name: 'Dashboard',
  computed: {},

  methods: {}
}
</script>

<style lang="scss" scoped>
* {
  margin: 0;
}
.dashboard {
  &-container {
    margin-top: 50px;
    margin-right: 10px;
    margin-left: 10px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
::v-deep .el-card__body {
  position: relative;
  height: 270px;
  padding-top: 12px;
  padding-left: 30px;
}
// ::v-deep.data-v-3a8fb937 .data-v-106c86ed {
//   height: 320px;
// }
.test-num {
  margin-top: 65px;
  margin-bottom: 65px;
  text-align: center;
  font-size: 35px;
}
.el-icon-warning {
  font-size: 18px;
  float: right;
  margin-right: 10px;
}
.el-icon-caret-top {
  color: #ff0000;
}
.el-icon-caret-bottom {
  color: #008000;
}
.foot {
  position: absolute;
  top: 220px;
  left: 30px;
}
hr {
  margin-top: 5px;
  margin-bottom: 10px;
  border: 0;
  background-color: #e8e8e8;
  height: 1px;
  width: 240px;
}
.cardcom {
  margin-top: 20px;
  height: 420px;
  .qianduan {
    position: absolute;
    top: 22px;
    right: 20px;
    color: #999999;
    font-size: 18px;
  }
  .tabSty {
    margin-top: 20px;
  }
}
</style>
